<script>
import InsertTable from "@/components/TiptapEditor/components/InsertTable/index.vue";
import FontSizeOption from "@/components/TiptapEditor/components/FontSizeOption/index.vue";
import SelectBackColor from "@/components/TiptapEditor/components/SelectBackColor/index.vue";
import SelectFontColor from "@/components/TiptapEditor/components/SelectFontColor/index.vue";
import Commands from '../../utils/handler.js'

export default {
  name: 'TXHeader',
  components: {
    InsertTable,
    FontSizeOption,
    SelectBackColor,
    SelectFontColor
  },
  props: {
    editor: {
      type: Object
    },
    handleImageUpload: {
      type: Function
    },
    handleVideoUpload: {
      type: Function
    },
  },
  data() {
    return {
      fontSize: '16px',
      commands: new Commands(this.editor)
    }
  },
  methods: {
    setSelectFontSize (fontsize) {
      this.fontSize = fontsize
    },
    selectFontSize (fontsize) {
      this.fontSize = this.commands.selectFontSize(fontsize)
    }
  }
}

</script>

<template>
  <div class="tx-header">
    <div class="tx-icon" @click="commands.handleUndo" title="撤回">
      <i class="iconfont icon-undo"></i>
    </div>
    <div class="tx-icon" @click="commands.handleRedo" title="重做">
      <i class="iconfont icon-redo"></i>
    </div>
    <div class="tx-icon" @click="commands.clearFormat" title="清除格式">
      <i class="iconfont icon-qingchugeshi"></i>
    </div>
    <div class="tx-icon" :class="{'is-active': editor.isActive('bold')}" @click="commands.toggleBold()" title="加粗">B</div>
    <div class="tx-icon" :class="{'is-active': editor.isActive('italic')}" @click="commands.toggleItalic()" title="倾斜">I</div>
    <div class="tx-icon" :class="{'is-active': editor.isActive('underline')}" @click="commands.toggleUnderline()" title="下划线">U</div>
    <div class="tx-icon" :class="{'is-active': editor.isActive({textAlign: 'left'})}" @click="commands.handleAlign('left')" title="左对齐">
      <i class="iconfont icon-caozuo_duiqifangshi_zuoduiqi"></i>
    </div>
    <div class="tx-icon" :class="{'is-active': editor.isActive({textAlign: 'center'})}" @click="commands.handleAlign('center')" title="居中">
      <i class="iconfont icon-caozuo_duiqifangshi_juzhongduiqi"></i>
    </div>
    <div class="tx-icon" :class="{'is-active': editor.isActive({textAlign: 'right'})}" @click="commands.handleAlign('right')" title="右对齐">
      <i class="iconfont icon-caozuo_duiqifangshi_youduiqi"></i>
    </div>
    <div class="tx-icon" :class="{'is-active': editor.isActive({textAlign: 'justify'})}" @click="commands.handleAlign('justify')" title="水平对齐">
      <i class="iconfont icon-caozuo_duiqifangshi_shuipingduiqi"></i>
    </div>
    <div class="tx-icon" @click="commands.handleIndent('up')" title="增加缩进">
      <i class="iconfont icon-24gl-indent"></i>
    </div>
    <div class="tx-icon" @click="commands.handleIndent('down')" title="减少缩进">
      <i class="iconfont icon-24gl-outdent"></i>
    </div>
    <div class="tx-icon" @click="commands.handleTextIndent" title="首行缩进">
      <i class="iconfont icon-24gl-textIndent"></i>
    </div>
    <div class="tx-icon" :class="{'is-active': editor.isActive('link')}" @click="commands.setLink" title="链接">
      <i class="iconfont icon-link"></i>
    </div>
    <FontSizeOption @select="selectFontSize" :modelValue="fontSize"/>
    <div class="tx-icon" @click="commands.insertOrReplaceImage(handleImageUpload)" title="插入图片">
      <i class="iconfont icon-charutupian"></i>
    </div>
    <SelectFontColor @select="(color) => commands.selectFontColor(color)" />
    <SelectBackColor @select="(color) => commands.selectBackColor(color)" />
    <InsertTable @click="(r, c) => commands.handleInsertTable(r, c)"/>
    <div class="tx-icon" @click="commands.handleImportWordChange2" title="导入Word">
      <i class="iconfont icon-daoruword"></i>
    </div>
  </div>
</template>

<style scoped lang="less">
@import '../../css/index';
</style>